<!--教学任务查询-->
<template>
<div id="teaching-research-office">
  <div class="assessment-container">
    <div class="search-container">
      <div class="search-container-left" style="display: flex;align-items: center;">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xqName"
            style="width: 90px"
            size="mini"
            clearable
            placeholder="请选择"
            @change="handleXq"
          >
            <el-option
              v-for="(item,index) in xqList"
              :key="index"
              :label="item.name"
              :value="index"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="pycc"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in pyccList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>年级：</span>
          <el-select
            v-model="nj"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in njList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程负责单位：</span>
          <el-popover
            trigger="click"
            placement="bottom"
            v-model="showUnitTree"
            style="cursor: pointer;"
            width="120">
            <div style="max-height: 260px;overflow-y: auto;">
            <el-tree
                  default-expand-all
                  node-key="id"
                  :data="bxList"
                  :expand-on-click-node="false"
                  :props="props"
                  @node-click="toShowUnitInfo">
            </el-tree>
            </div>
            <el-input slot="reference" v-model="kcfzdw" class="selectTree" placeholder="请选择"
                clearable style="width: 120px;" suffix-icon="el-icon-arrow-down">
            </el-input>
          </el-popover>
        </div>
        <div class="search-container-item">
          <span>课程编号：</span>
          <el-input
            style="width: 100px"
            size="mini"
            placeholder="请输入内容"
            v-model="kcbh"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>课程名称：</span>
        <el-input
            style="width: 100px"
            size="mini"
            placeholder="请输入内容"
            v-model="kcmc"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>状态：</span>
          <!--<el-input-->
            <!--style="width: 100px"-->
            <!--size="mini"-->
            <!--placeholder="请输入内容"-->
            <!--v-model="zt"-->
          <!--&gt;</el-input>-->
          <el-select
            v-model="zt"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in ztList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
         <div class="search-button" @click="handleSearch">
          <img src="../../../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="search-container">
      <div></div>
      <div class="search-container-right">
        <el-button plain type="warning" size="mini" @click="creatClassByKC">按课程生成教学班</el-button>
        <el-button plain type="warning" size="mini" @click="creatClassByJXB">按专业班次生成教学班</el-button>
      </div>
    </div>
  </div>
  <div class="assessment-container">
      <div class="table-container">
        <el-table
        :data="tableData"
        border
        style="width: 100%;height: calc(100vh - 370px);
    overflow-y: auto;"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
         @selection-change="handleSelectionChange"
         :row-key="getRowKeys"
      >
        <el-table-column width="100" align="center" type="selection" :reserve-selection="true"></el-table-column>
        <el-table-column prop="zybc" label="操作" width="150" align="center">
            <template slot-scope="scoped">
                <el-button v-if="scoped.row['state'] == '' || scoped.row['state']=='待审核'" icon="el-icon-setting" type="success" plain size="mini" @click="setTeachClass(scoped.row)">设置</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100" align="center">
          <template slot-scope="scoped">
            <span v-if="scoped.row.state == ''">待审核</span>
            <span v-else>{{scoped.row.state}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fzdw"   label="系[教研室]" width="100" align="center">
        </el-table-column>
        <el-table-column prop="kcbh"   label="课程编号" width="100" align="center"></el-table-column>
        <el-table-column prop="kcmc"   label="课程名称" width="100" align="center"></el-table-column>
        <el-table-column prop="nj"   label="年级" width="100" align="center"></el-table-column>
        <el-table-column prop="pycc"   label="培养层次" width="100" align="center"></el-table-column>
        <el-table-column prop="xs"   label="学时" width="100" align="center"></el-table-column>
        <el-table-column prop="jxbList"   label="教学班" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row['jxbList'].length > 0">
              <div v-for="item in scope.row['jxbList']">
                <sapn>{{item.name}}</sapn>
                <span v-for="data in item.zybcList">[{{data.name}} ({{data.yxrs}}人)]</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="zybcList" label="未安排专业班次" width="325" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row['zybcList'].length > 0">
              <div v-for="item in scope.row['zybcList']">
                <span v-if="item.wxrs > 0">[{{item.name}} ({{item.wxrs}}人)]</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
    <div
      class="wrapper-container"
    >
      <div class="bottom-block" style="display: block">
      <div class="text">
        当前共找到{{ total }}条记录,当前显示{{ startPage }}-{{ endPage }}条
      </div>
    </div>
    <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
    </div>
    <el-dialog title="提示" :visible.sync="syncShowTip" width="600px">
      <div class="class-tip">
        一旦同步，数据将不能恢复，您确定要同步么？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="warning" plain style="margin-right: 50px" @click="tipConfirm">确 定</el-button>
        <el-button plain type="danger" plain @click="syncShowTip = false">取 消</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import ButtonItem from '@/components/ButtonItem.vue';
import {jxbgl_query_class_jyskc,jxbgl_submit_jxbByKc,jxbgl_submit_jxbByZybc,queryCommonJysDept,
queryCommonNj,queryCommonPyccId,queryCommonXueqi
} from "@/api/trainingManagement/place.js";
export default {
  components: { ButtonItem },
  data() {
    return {
      bxList:[], //部系列表
      ztList:[
        {id: '待审核', name: '待审核'},
        {id: '审核通过', name: '审核通过'},
        {id: '已发布', name: '已发布'},
        {id: '打回', name: '打回'},
      ],
       props:{
        children: "children",
        label: "name",
      },
      showUnitTree: false,
      syncShowTip: false,
      xq: "",
      xqList: [],
      nj: "",
      njList: [],
      kcfzdw: "", //课程负责单位：
      kcbh: "", //课程编号：
      kcmc: "", //课程名称：
      zt: "", // 状态：
      pycc: "",
      pyccList: [],
      tableData: [],
      total: 0, //总条数
      pageSize: 50, //条数
      startPage: 0, //开始条数
      endPage: 0, //结束条数
      currentPage: 1, //当前页数
      xiId: "", //系id
      jysId: "", //教研室id
      xqName:'',
      selectClassList: [], //选中课程列表
    };
  },
  methods: {
    handleXq(index){
      this.xq = this.xqList[index].id;
      this.xqName = this.xqList[index].name;
    },
    getRowKeys(row) {
      return row.id
    },
    // 获取部门
    async queryCommonDept() {
      const res = await queryCommonJysDept();
      if (res.data.code == 200) {
        this.bxList = res.data.data;
      }
    },
    toShowUnitInfo(data, node) {
      if(node.level == 1){
        this.kcfzdw = data.name;
        this.xiId = data.id;
        this.jysId = "";
      }
      if(node.level == 2){
        this.kcfzdw = data.name;
        this.xiId = data.parentId;
        this.jysId = data.id;
      }

      this.showUnitTree = false;
      },
    handleSelectionChange(val) {
      this.selectClassList = val;
    },
    // 按照课程生成教学班
    async creatClassByKC() {
      if (this.selectClassList.length > 0) {
        var data =[];
        this.selectClassList.forEach(item => {
          let par = {
              "jysId": item.jysId,
              "nj": item.nj,
              "xueqi": item.xueqi,
              "kcbh": item.kcbh
          };
          data.push(par);
        })
        const res = await jxbgl_submit_jxbByKc(data);
        if (res.data.code == 200) {
          this.$message.success("教学班生成成功!");
          this.queryClassJyskc();
        }
      } else {
        this.$message.warning("请先选择课程！");
        return
      }

    },
    // 按专业班次生成教学班
    async creatClassByJXB() {
      if (this.selectClassList.length > 0) {
        var data =[];
        this.selectClassList.forEach(item => {
          let par = {
              "jysId": item.jysId,
              "nj": item.nj,
              "xueqi": item.xueqi,
              "kcbh": item.kcbh
          };
          data.push(par);
        })
        const res = await jxbgl_submit_jxbByZybc(data);
        if (res.data.code == 200) {
          this.$message.success("教学班生成成功!");
          this.queryClassJyskc();
        }
      } else {
        this.$message.warning("请先选择课程！");
        return
      }
    },
    // 获取培养层次列表
    async queryCommonPycc() {
      const res = await queryCommonPyccId();
      if (res.data.code == 200) {
        this.pyccList = res.data.data;
      }
    },
    // 获取年级列表
    async queryCommonNj() {
      const res = await queryCommonNj('');
      if (res.data.code == 200) {
        this.njList = res.data.data;
      }
    },
    // 获取学期列表
    async queryCommonXueqi() {
      const res = await queryCommonXueqi();
      if (res.data.code == 200) {
        this.xqList = res.data.data;
        this.xq = this.$route.query.xq;
        this.xqName = this.$route.query.xqName;
      }
    },
    setTeachClass(row){
      this.$router.push({
        path: "/admin/teachingTaskManage/teachingclass/setTeachingClass",
        query: {
          kcid: row.kcid,
          xueqi:this.xq,
          xueqiName:this.xqName,
          nj: row.nj,
          kcbh: row.kcbh
        }
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryClassJyskc();
    },
    handleSearch(){
      this.queryClassJyskc();
    },
    // 查询教学班管理数据
    async queryClassJyskc() {
      var jysId = this.jysId; //教研室id
      var xiId = this.xiId; // 系id
      var xueqi = this.xq; //学期
      var pycc = this.pycc; //培养层次
      var nj = this.nj; //年级
      // var fzdw = this.kcfzdw; //课程负责单位
      var fzdw = ""; //课程负责单位
      var state = this.zt; // 状态
      var kcbh = this.kcbh; // 课程编号
      var kcmc = this.kcmc; // 课程名称
      const res = await jxbgl_query_class_jyskc(jysId, xiId, xueqi, pycc, nj, fzdw, state, kcbh, kcmc);
      if (res.data.code == 200) {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        var length = res.data.data.records.length;
        this.calculatePage(this.pageSize, res.data.data.current, length);
      }
    },
    // 计算开始和结束条数
    calculatePage(pageSize, current, length) {
      if (current == 1) {
        if (length != 0) {
          this.startPage = 1;
          this.endPage = length;
        }
      } else {
        this.startPage = pageSize * (current - 1) + 1;
        this.endPage = parseInt(this.startPage) + parseInt(length) - 1;
      }
    },
  },

  mounted() {
    this.jysId = this.$route.query.jysId;
    this.xiId = this.$route.query.xiId;
    this.kcfzdw = this.$route.query.name;
    this.xq = this.$route.query.xq;
    this.queryCommonPycc();
    this.queryCommonNj();
    this.queryCommonXueqi();
    this.queryCommonDept();
    this.queryClassJyskc();
  }
};
</script>
<style lang="less" scoped>
.plan-entry-table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 82px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .el-table th.el-table__cell > .cell {
    padding: 0;
  }
  .el-table .cell,
  .el-table--border .el-table__cell:first-child .cell {
    padding: 0;
  }
  .el-table__body td .cell {
    padding: 0;
  }

  .add-button {
    margin: 0 auto;
    cursor: pointer;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 65px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 13px;
      height: 13px;
      margin-right: 8px;
    }
  }
  .pass-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  .wait-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ff3819;
  }
  .watch-button {
    width: 76px;
    height: 36px;
    background: #fef1e8;
    border: 1px solid #f86900;
    border-radius: 6px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #f86900;
    line-height: 16px;
    margin: 2px auto;
  }
}
</style>

<style lang="less" scoped>
@import "../../../../../styles/delayedExam.less";


.assessment-container {
  width: 1603px;
  margin: 0 auto;
  .search-container {
    margin-top: 27px;
    padding-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .search-container-left,
    .search-container-right {
      margin-top: 0px;
      display: flex;
      flex-direction: row;
    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
  .bottom-block-export {
    right: 0;
    width: 127px;
    height: 27px;
    line-height: 34px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    opacity: 1;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    > span {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 9px;
    }
  }
  .class-tip {
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px;
}
  .plan-entry-table-container {
    margin-top: 30px;
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}
.undeLine {
  text-decoration: underline;
  cursor: pointer;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bottom-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .export-button {
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;

      > img {
        width: 17px;
        height: 17px;
      }

      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }

    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }
@import "../../../../../styles/text.less";
.assessment-container {
  width: calc(100% - 20px);
  .table-container {
     width: 100%;
  }
}
.bottom-block{
  width: calc(100% - 20px);
  margin: 0 auto;
}


/deep/ .table-container {
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    /*border-radius: 9px;*/
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

/deep/ .el-tree-node {
  color: #004ca7;
}

.selectTree {
  /deep/ .el-input__inner {
    height: 28px;
  }
}
</style>

<style lang="less" scoped>
  #teaching-research-office{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--success.is-plain{
      background: #F1FFF8;
      border-color: #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }
    /deep/ .el-button--success.is-plain:hover{
      background: #F1FFF8;
      border: 1px solid #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain{
      background: #F1F8FE;
      border-color: #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain:hover{
      background: #F1F8FE;
      border: 1px solid #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
</style>
